<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #out{
            perspective: 1000px;
            -webkit-perspective: 1000px;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*第一个参数定义过渡效果的名称：none/all/元素属性名称*/
            transition: all 5s linear;
            -webkit-transform-style: preserve-3d;
        }
        #box:hover{
            width: 300px;
            height: 300px;
            /*hover的时候改变旋转的角度*/
            -webkit-transform:rotateX(60deg) ;
            background-color: red;
        }
       /*.box1{*/
           /*transform: rotateX(60deg);*/
       /*}*/

    </style>
</head>
<body>

   <div id="out">
       <div id="box">这是一个盒子</div>
   </div>
<script type="text/javascript">
    var box=document.getElementById("box");
     box.onclick=function(){
         box.className="box1";
     }



</script>
</body>
</html>